<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-row type="flex" style="flex: auto">
          <a-row>
            <f-Resourcessider></f-Resourcessider>
          </a-row>
          <a-layout-content
            :style="{ margin: '24px 16px 0', overflow: 'initial' }"
          >
            <div :style="{ padding: '24px', background: '#fff' }">
              <a-row type="flex" justify="space-between">
                <a-col class="disflex">
                  <div class="title mr1r">资源分类管理</div>
                </a-col>
                <a-col>
                  <a-button type="primary" @click="add((visible = true))"
                    >创建新资源分类</a-button
                  >
                </a-col>
              </a-row>
              <a-table
                :columns="columns"
                :rowKey="(data) => data.resources_catid"
                :dataSource="data"
                :expandedRowKeys="childrenKey"
              >
                <template slot="Resourcesimg" slot-scope="data">
                  <img :src="data.url" />
                </template>
                <template slot="operation" slot-scope="data">
                  <a
                    class="operation"
                    @click="
                      edit(
                        data.resources_catid,
                        data.resources_cate_title,
                        data.resources_cate_introduction,
                        data.parentid
                      )
                    "
                    >修改</a
                  >
                  <a class="operation" @click="del(data.resources_catid)"
                    >删除</a
                  >
                </template>
              </a-table>
              <a-modal
                title="创建资源分类"
                v-model="visible"
                @ok="save(1)"
                cancelText="取消"
                okText="确定"
              >
                <p>
                  <a-row type="flex" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>上级分类:</div>
                    </a-col>
                    <a-col class="disflex">
                      <a-select
                        default-value="请选择所属分类"
                        style="width: 150px"
                        @change="CateChange"
                      >
                        <a-select-option value="0">顶级分类</a-select-option>
                        <a-select-option
                          :value="item.resources_catid"
                          v-for="(item, index) in cateData"
                          :key="index"
                          >{{ item.resources_cate_title }}</a-select-option
                        >
                      </a-select>
                    </a-col>
                  </a-row>
                </p>
                <p>
                  <a-row type="flex" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>分类名称:</div>
                    </a-col>
                    <a-col :span="12" class="disflex">
                      <a-input
                        v-model="resources_cate_title"
                        placeholder="请输入分类名称"
                      />
                    </a-col>
                  </a-row>
                  <a-row type="flex" class="mt1r" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>分类简介:</div>
                    </a-col>
                    <a-col :span="12" class="disflex">
                      <a-textarea
                        placeholder="请输入分类简介"
                        v-model="resources_cate_introduction"
                        :rows="4"
                      />
                    </a-col>
                  </a-row>
                  <a-row class="mt1r" type="flex" align="middle">
                    <a-col :span="4">特色图片：</a-col>
                    <a-col :span="12">
                      <div class="clearfix">
                        <a-upload
                          listType="picture-card"
                          :remove="handleRemove"
                          :beforeUpload="beforeUpload"
                          :file-list="fileList"
                        >
                          <div v-if="fileList.length < 1">
                            <a-icon :type="loading ? 'loading' : 'plus'" />
                            <div class="ant-upload-text">上传图片</div>
                          </div>
                        </a-upload>
                      </div>
                    </a-col>
                  </a-row>
                </p>
              </a-modal>
              <a-modal
                title="修改资源分类"
                v-model="editvisible"
                @ok="save(2)"
                cancelText="取消"
                okText="确定"
              >
                <p>
                  <a-row type="flex" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>上级分类:</div>
                    </a-col>
                    <a-col class="disflex">
                      <a-select
                        default-value="请选择所属分类"
                        style="width: 150px"
                        @change="CateChange"
                        :value="parentid"
                      >
                        <a-select-option :value="0">顶级分类</a-select-option>
                        <a-select-option
                          :value="item.resources_catid"
                          v-for="(item, index) in cateData"
                          :key="index"
                          :disabled="
                            item.resources_catid == resources_catid
                              ? true
                              : false
                          "
                          >{{ item.resources_cate_title }}</a-select-option
                        >
                      </a-select>
                    </a-col>
                  </a-row>
                </p>
                <p>
                  <a-row type="flex" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>分类名称:</div>
                    </a-col>
                    <a-col class="disflex">
                      <a-input
                        v-model="resources_cate_title"
                        placeholder="请输入分类名称"
                      />
                    </a-col>
                  </a-row>
                  <a-row type="flex" class="mt1r" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>分类简介:</div>
                    </a-col>
                    <a-col :span="12" class="disflex">
                      <a-textarea
                        placeholder="请输入分类简介"
                        v-model="resources_cate_introduction"
                        :rows="4"
                      />
                    </a-col>
                  </a-row>
                  <a-row class="mt1r" type="flex" align="middle">
                    <a-col :span="4">特色图片：</a-col>
                    <a-col :span="12">
                      <div class="clearfix">
                        <a-upload
                          listType="picture-card"
                          :remove="handleRemove"
                          :beforeUpload="beforeUpload"
                          :file-list="fileList"
                        >
                          <div v-if="fileList.length < 1">
                            <a-icon :type="loading ? 'loading' : 'plus'" />
                            <div class="ant-upload-text">上传图片</div>
                          </div>
                        </a-upload>
                      </div>
                    </a-col>
                  </a-row>
                </p>
              </a-modal>
              <!-- <div class="btn">
                    <a-button class="ml1rem" type="primary" @click="back">返回</a-button>
              </div>-->
            </div>

            <f-footer></f-footer>
          </a-layout-content>
        </a-row>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import axios from "axios";
import { baseURL } from "../../api/config.js";
import Resourcessider from "../../components/layout/ResourcesSider.vue";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "分类ID",
    dataIndex: "resources_catid",
  },
  {
    title: "分类名称",
    dataIndex: "resources_cate_title",
  },
  {
    title: "缩略图",
    scopedSlots: { customRender: "Resourcesimg" },
  },
  {
    title: "创建时间",
    dataIndex: "Resources_cate_time",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];

export default {
  metaInfo: {
    title: "资源分类",
  },
  data() {
    return {
      data,
      columns,
      resources_cate_title: "",
      resources_cate_introduction: "",
      resources_catid: 0,
      parentid: 0,
      visible: false,
      editvisible: false,
      loading: false,
      childrenKey: [],
      cateData: [],
      fileid: 0,
      fileList: [],
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-Resourcessider": Resourcessider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getResourcescate();
    this.setsiders();
    this.getAllResourcesCate();
  },
  methods: {
    //选择图片
    handleRemove() {
      this.fileList = [];
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    upimg() {
      var token = localStorage.getItem("token");
      // const formData = new FormData();
      const formData = new FormData();
      formData.append("files[]", this.fileList[0]);
      formData.append("token", token);
      this.saveFile(formData);
    },
    saveFile(formData) {
      axios({
        method: "post",
        url: baseURL + "Admin/file/uploadfile",
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.imageUrl = res.data;
            this.fileid = res.fileid;
            setTimeout(this.upimages, 1);
            this.$message.success("图片上传成功");
            // this.savecontent();
            if (this.saveType == 1) {
              this.okadd();
            } else {
              this.okedit();
            }
          } else if (res.code == 4001) {
            this.$router.push("/Auth/login");
            this.$message.warning("凭证失效，请重新登陆");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //上传图片
    save(e) {
      if (this.fileList.length > 0) {
        this.upimg();
        this.saveType = e;
      } else {
        if (e == 1) {
          this.okadd();
        } else {
          this.okedit();
        }
      }
    },
    add() {},
    okadd() {
      const url = "/Admin/Resources/addResourcescate";
      const paramObj = {
        parentid: this.parentid,
        resources_cate_title: this.resources_cate_title,
        resources_cate_introduction: this.resources_cate_introduction,
        fileid: this.fileid,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("新增成功");
          this.resources_cate_title = "";
          this.visible = false;
          this.fileid = 0;
          this.fileList = [];
          this.getResourcescate();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("新增失败，请刷新重试");
        }
      });
    },
    okedit() {
      const url = "/Admin/Resources/editResourcescate";
      const paramObj = {
        resources_catid: this.resources_catid,
        fileid: this.fileid,
        resources_cate_title: this.resources_cate_title,
        resources_cate_introduction: this.resources_cate_introduction,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.resources_cate_title = "";
          this.resources_catid = 0;
          this.editvisible = false;
          this.fileid = 0;
          this.fileList = [];
          this.getResourcescate();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("修改失败，请刷新重试");
        }
      });
    },
    edit(
      resources_catid,
      resources_cate_title,
      resources_cate_introduction,
      parentid
    ) {
      this.editvisible = true;
      this.resources_catid = resources_catid;
      console.log(this.resources_catid, "resources_catid");
      this.resources_cate_title = resources_cate_title;
      this.resources_cate_introduction = resources_cate_introduction;
      if (parentid) {
        this.parentid = parentid;
      }
    },
    del(e) {
      const _this = this;
      _this.$confirm({
        title: "该操作不可逆，确定删除该记录?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          const url = "/Admin/Resources/delResourcescate";
          const paramObj = {
            resources_catid: e,
            token: localStorage.getItem("token"),
          };
          _this.$server.sl("GET", url, paramObj).then((res) => {
            if (res.code == 1) {
              _this.getResourcescate();
              _this.$message.success("删除成功");
            } else if (res.code == 4001) {
              _this.$router.push("/Auth/login");
              _this.$message.warning("凭证失效，请重新登陆");
            } else {
              _this.$message.warning(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },
    //获取资源分类
    getResourcescate: function () {
      const url = "/Admin/Resources/getResourcescate";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.data = res.data;
          //获取展开子类的key
          var childrenKey = [];
          for (let index = 0; index < this.data.length; index++) {
            if (this.data[index].children) {
              childrenKey.push(this.data[index].resources_catid);
            }
          }
          this.childrenKey = childrenKey;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取资源分类失败，请刷新重试");
        }
      });
    },
    //翻页
    changePage: function (page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.getlst();
    },
    //获取全部分类
    getAllResourcesCate: function () {
      const url = "/Admin/Resources/getParentResourcesCate";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.cateData = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取资源分类失败，请刷新重试");
        }
      });
    },
    //选择分类
    CateChange: function (e) {
      console.log(e);
      this.parentid = e;
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "11");
      this.$store.commit("updateSubmenu", "11-2");
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
.picurl {
  height: 3rem;
}
.operation:first-child {
  margin-right: 1rem;
}
.disflex {
  display: flex;
}
img {
  height: 2rem;
  width: 2rem;
}
.mt1r {
  margin-top: 1rem;
}
.mr1r {
  margin-right: 1rem;
}
.btn {
  margin-top: 10px;
}
/deep/.ant-tabs-bar {
  margin: 0;
}
</style>